<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Js动画</title>
  <script src="vue.js"></script>
  <link rel="stylesheet" href="css/animate.css">
  <style>
  </style>
</head>
<body>
<!--入场动画-->
<!--@before-enter="handleBeforeEnter"-->
<!--@enter="handleEnter"-->
<!--@after-enter="handleAfterEnter"-->
<!--离场动画-->
<!--将enter改为leave就可以了-->
<!--done是回调函数  动画执行完毕再手动执行一次done()-->
<!--运行的所有动画都在handleEnter中的回调函数done里执行的-->
<div id="app">
  <transition
      name="fade"
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
  >
        <div v-show="show">hello world</div>
    </transition>
    <button @click="handelBtnClick">change</button>
</div>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
        show:true
    },
    methods:{
      handelBtnClick:function(){
           this.show=!this.show
      },
      handleBeforeEnter:function(el){
         el.style.color='red'
      },
      handleEnter:function(el,done){
        setTimeout(()=>{
          el.style.color='green'
        },2000)
        setTimeout(()=>{
          done()
        },4000)
      },
      handleAfterEnter:function(el){
        el.style.color='#666'
      }
    }
  })
</script>
</body>
</html>
